<template>
    <div v-if="goodInfo.author !=null" class="root">
        <div class="imgContent">
            <img src="../../assets/homeImg/homepage.jpg" alt="">
        </div>
        <div>
            <ul class="ul-one">
                <li>5.4k</li>
                <li>75</li>
                <li>20</li>
                <li>1</li>
                <li>36</li>
            
            </ul>
            <ul class="ul-two">
                <li>智慧值</li>
                <li>笔芯</li>
                <li>微句</li>
                <li>评论</li>
                <li>粉丝</li>
            </ul>
            <div style="position:relative">
                <div class="img-right">
                <img  :src="goodInfo.author.cover" alt="">
                </div>
            </div>
            
        </div>
        <section>
            <div class="content">
                <div>昵称</div>
                <div v-text="goodInfo.author.name"></div>
            </div>
            <div class="content">
                <span>性别</span>
                <span>保密</span>
            </div>
            <div class="content">
                <span>地区</span>
                <span>未知</span>
            </div>
            <div class="content">
                <span>个性签名</span>
                <!-- class="qianming" v-text="goodInfo.content" -->
                <span ></span>    
            </div>
        </section>
    </div>
</template>

<script>
import bus from '../../js/bus.js'
export default {
data() {
    return {
        goodInfo:[]
    }
},
    methods: {
        
    },
    mounted() {
        var _this = this
        bus.$on('goodinfo' , function(data) {
            // console.log(1)
            // console.log(data)
            _this.goodInfo = data
            // console.log(_this.goodInfos)
        })
    }
}
</script>

<style scoped>
.root{
    width: 100vw;
    background-color: rgb(231, 224, 224);
}
.imgContent{
    width: 100vw;
}
.imgContent>img{
    width: 100vw;
    /* height: 50vw; */
    margin-top: -1vw;

}
li img{
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
}
ul{
    color: #fff;
     margin-right: 18vw;
     font-size: 4vw;
}
.ul-one{
    display: flex;
    margin-top: -10vw;
    justify-content: space-around;
   
}
.ul-two{
    
    display: flex;
    justify-content: space-around;
   
}
.img-right{
    position: absolute;
    right: 3vw;
    top: -10vw;
}
.img-right > img{
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
}
section{
    margin-top: 5vw;
    background-color: #fff;
    font-size: 4.5vw;
}
.content{
    display: flex;
    box-sizing: border-box;
    padding: 5vw 0;
    justify-content: space-between;
}
/* .qianming{
    font-size: 3vw;
} */
</style>
